<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./index.js"></script>
    <script>
        // const proxyUser1 = shallowReactive({
        //     name: 'zz',
        //     car: {
        //         color: 'red'
        //     }
        // })
        // // 拦截到写的数据
        // proxyUser1.name += 'xx'
        // // 拦截到了读取数据，但是拦截不到修改的数据
        // proxyUser1.car.color += 'y'
        // // 拦截到了删除数据
        // delete proxyUser1.name
        // // 只拦截到读，拦截不到删除
        // delete proxyUser1.car.color
        // const proxyUser2 = reactive({
        //     name: 'zz',
        //     car: {
        //         color: 'red'
        //     }
        // })
        // // 拦截到读和写的数据
        // proxyUser2.name += 'xx'
        // // 拦截到了读取数据，修改数据
        // proxyUser2.car.color = 'y'
        // // 拦截到了删除数据
        // delete proxyUser2.name
        // // 只拦截到读和删除
        // delete proxyUser2.car.color


        // const proxyUser3 = shallowReadonly({
        //     name: 'zz',
        //     car: {
        //         color: ['red', 'yellow']
        //     }
        // })
        // // 可以读取
        // console.log(proxyUser3.name)
        // // 不能修改
        // proxyUser3.name = 'SS'
        // // 不能删除
        // delete proxyUser3.name
        // // 拦截到了读取，可以修改
        // proxyUser3.car.color[0] = 'blue'
        // // 拦截到了读取，可以删除
        // delete proxyUser3.car.color[0]
        // const proxyUser4 = readonly({
        //     name: 'zz',
        //     car: {
        //         color: ['red', 'yellow']
        //     }
        // })
        // // 拦截到了读取
        // console.log(proxyUser4.name)
        // console.log(proxyUser4.car.color[0])
        // // 只能读取不能修改
        // proxyUser4.name = 'haha'
        // proxyUser4.car.color[0] = 'black'
        // delete proxyUser4.name
        


        const ref1 = shallowRef({
            name: 'zz',
            car: {
                color: 'red'
            }
        })
        // console.log(ref1.value)
        // // 能劫持到
        // // ref1.value = '!!!'
        // // 深层的劫持不到
        // ref1.value.card = '888'
        const ref2 = ref({
            name: 'zz',
            car: {
                color: 'red'
            }
        })
        console.log(ref2.value)
        // 劫持到
        ref2.value = '2222'
        // 劫持到
        ref2.value.card = '888'
        console.log('isRef:', isRef(ref({})))
        console.log('isReactive', isReactive(reactive({})))
    </script>
</body>
</html>